<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入框</title>
		<link  rel="stylesheet" href="../css/base.css"/>
		<link  rel="stylesheet" href="../css/input.css"/>
	</head>
	<body>
		<div class="main">
			<div class="center">
				<div class="item">
					<label class="input-label">姓名: </label>
					<input type="text" class="input"/>
				</div>
				<div class="item">
					<label class="input-label">姓名: </label>
					<input type="text" class="input select"/>
				</div>
				
				<div class="item">
					<label class="input-label">搜索: </label>
					<input type="text" class="input select-search" placeholder="change事件监听"/>
				</div>
				
				<div class="item">
					<label class="input-label">选择: </label>
					<div tabindex="0" type="text" class="input select-search-div" placeholder="change事件监听">
						<span>请选择</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="select-pane">
		
		</div>
		
		<div class="select-pane select-pane-div">
		
		</div>
		
		<div class="select-search-pane">
			
		</div>
		<script>
	
			
			let target_div=document.getElementsByClassName('select-search-div')[0];
			let source_div=document.getElementsByClassName('select-pane-div')[0];
			
			let target=document.getElementsByClassName('select')[0];
			let source=document.getElementsByClassName('select-pane')[0];
			elementBoundMouseClickEvent(target_div,source_div,function(e){
				Array.from(target_div.childNodes).forEach(function(node) {
				  console.log(node.nodeName)
				  if(node.nodeName=='SPAN'){
					   var nodeText = node.firstChild;
					   if(nodeText.nodeType==3){
						   var newText = document.createTextNode(e.target.textContent);
						   node.replaceChild(newText,nodeText);
					   }
				  }
				});
			});
			elementBoundMouseClickEvent(target,source,function(e){
				target.value=e.target.textContent;
			});
			
			let change_arr=['苹果','乔布斯','china','list']
			let target_search=document.getElementsByClassName('select-search')[0];
			let source_search=document.getElementsByClassName('select-search-pane')[0];
			elementBoundInputChangeEvent(target_search,source_search);
		
			
			//元素绑定改变事件
			function elementBoundInputChangeEvent(mouseDom,showDom){
				mouseDom.addEventListener('click',function(){
					exection();
				})
				mouseDom.addEventListener('input',function(e){
					exection();
				})
				function exection(){
					let text=mouseDom.value;
					const filteredArray = change_arr.filter(item => item.indexOf(text) !== -1);
					elementRemoveChild(showDom);
					createDomBound(showDom,filteredArray,function(e){
						console.log(e.target.textContent);
						mouseDom.value=e.target.textContent;
					});
					 showDom.style.position ='absolute';
					 showDom.style.display = 'block';
					 //获取元素在屏幕里的可见地方 
					 var rect = mouseDom.getBoundingClientRect();
					 let top=rect.bottom + window.pageYOffset;
					 showDom.style.left = rect.left + "px";
					 showDom.style.right= rect.right + "px";
					 showDom.style.width = (mouseDom.offsetWidth - 10) +"px";
					 showDom.style.top = (top + 10) + "px";
				}
				mouseDom.addEventListener('mouseout', function(e) {
					leave();
				});
				showDom.addEventListener('mouseout', function(e) {
					leave();
				});
				function leave(){
					var sourceDivRect = mouseDom.getBoundingClientRect(); // 获取该div元素相对于视口的位置信息
					var targetDivRect = showDom.getBoundingClientRect();
					var mouseX = event.clientX; // 获取鼠标当前位置的x坐标
					var mouseY = event.clientY; // 获取鼠标当前位置的y坐标
					if (mouseX >= sourceDivRect.left && mouseX <= sourceDivRect.right && mouseY >= sourceDivRect.top && mouseY <= sourceDivRect.bottom +10) {
						console.log('鼠标在sourceDivRect区域内');
					} else if( mouseX >= targetDivRect.left && mouseX <= targetDivRect.right && mouseY >= targetDivRect.top && mouseY <= targetDivRect.bottom){
						console.log('鼠标在targetDivRect区域内');
					} else {
						showDom.style.display = 'none';
					}
				}
			}
			
			function createDomBound(boundElement,arr,callback){
				var ulNode = document.createElement("ul");
				arr.forEach(e=>{
					var liNode = document.createElement("li");
					liNode.addEventListener('click',function(e){
						e.stopPropagation();
						callback(e);
					})
					var itemText = document.createTextNode(e);
					liNode.appendChild(itemText);
					ulNode.appendChild(liNode);
				})
				boundElement.appendChild(ulNode);
			}
			
			function elementRemoveChild(parent){
				while (parent.firstChild) {
				    parent.removeChild(parent.firstChild);
				}
			}
			
			
			
			
			
			//元素绑定点击关联
			function elementBoundMouseClickEvent(mouseDom,showDom,callback){
				mouseDom.addEventListener('click',function(e){
					exection();
				})
				function exection(){
					elementRemoveChild(showDom);
					createDomBound(showDom,change_arr,function(e){
						console.log(e.target.textContent);
						callback(e);
					});
					 showDom.style.position ='absolute';
					 showDom.style.display = 'block';
					 //获取元素在屏幕里的可见地方 
					 var rect = mouseDom.getBoundingClientRect();
					 let top=rect.bottom + window.pageYOffset;
					 showDom.style.left = rect.left + "px";
					 showDom.style.right= rect.right + "px";
					 showDom.style.width = (mouseDom.offsetWidth - 10) +"px";
					 showDom.style.top = (top + 10) + "px";
				}
				mouseDom.addEventListener('mouseout', function(e) {
					leave();
				});
				showDom.addEventListener('mouseout', function(e) {
					leave();
				});
				function leave(){
					var sourceDivRect = mouseDom.getBoundingClientRect(); // 获取该div元素相对于视口的位置信息
					var targetDivRect = showDom.getBoundingClientRect();
					var mouseX = event.clientX; // 获取鼠标当前位置的x坐标
					var mouseY = event.clientY; // 获取鼠标当前位置的y坐标
					if (mouseX >= sourceDivRect.left && mouseX <= sourceDivRect.right && mouseY >= sourceDivRect.top && mouseY <= sourceDivRect.bottom +10) {
						console.log('鼠标在sourceDivRect区域内');
					} else if( mouseX >= targetDivRect.left && mouseX <= targetDivRect.right && mouseY >= targetDivRect.top && mouseY <= targetDivRect.bottom){
						console.log('鼠标在targetDivRect区域内');
					} else {
						showDom.style.display = 'none';
					}
				}
			}
			
		</script>
	</body>
</html>